
<title>标题</title>
<!--当前位置开始-->
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <script type="text/html" template lay-done="layui.data.updateMainBreadcrumb();">
        </script>
    </div>
</div>
<!--当前位置结束-->
<style>
    .mydiv {
        margin-top: 10px;
    }

        .mydiv p {
            width: 100%;
            line-height: 30px;
            margin-bottom: 5px;
        }
</style>
<script type="text/html" template lay-type="Post" lay-url="Api/WeChatMenu/GetIndex" lay-done="layui.data.done(d);">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">使用说明及规则，请仔细阅读</div>
                    <div class="layui-card-body">
                        <blockquote class="layui-elem-quote">
                            <p>官方要求：1、一级菜单按钮个数为2-3个。2、如果设置了二级菜单，子按钮个数为2-5个。3、按钮描述，既按钮名字，不超过16个字节，子菜单不超过40个字节。</p>
                            <p>如果name不填，此按钮将被忽略。</p>
                            <p>如果一级菜单为空，该列所有设置的二级菜单都会被忽略，key仅在SingleButton（单击按钮，无下级菜单）的状态下设置。</p>
                            <p>如果此按钮有下级菜单，key将被忽略，所有二级菜单都为SingleButton。</p>
                            <p>如果要快速看到微信上的菜单最新状态，需要重新关注，否则需要静静等待N小时。</p>
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div id="menuEditor">
                    <form action="/Api/WeChatMenu/CreateMenu" id="form_Menu" method="post" _lpchecked="1">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header" style="padding: 10px 10px">
                                    <div class="layui-form-item">
                                        <div class="layui-input-inline layui-inline-10">
                                            <button id="btnGetMenu" class="layui-btn layui-btn-sm" type="button">获取当前菜单</button>
                                            <button type="button" class="layui-btn layui-btn-sm" id="submitMenu">更新到服务器</button>
                                            <button id="btnDeleteMenu" class="layui-btn layui-btn-danger layui-btn-sm" type="button">删除全部菜单(谨慎操作)</button>
                                        </div>
                                        <div class="layui-input-inline"> <input id="tokenStr" name="token" value="" class="layui-input" style="width: 400px;" type="hidden" readonly="readonly" />  </div>
                                    </div>
                                </div>
                                <div class="layui-card-body">
                                    <p class="menu-state layui-elem-quote">
                                        操作状态：<strong id="menuState">-</strong>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md7 menu-list">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <table id="menuTable" class="layui-table">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>第一列</th>
                                                    <th>第二列</th>
                                                    <th>第三列</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{#  for (var i = 0; i < 6; i++) { }}
                                                <tr id="{{ i == 5? ' subMenuRow_'+i:'rootMenuRow' }}">
                                                    <td class="menuRowTip {{ i == 5? ' rootMenu':'' }}">
                                                        {{ i == 5? '一级菜单按钮':'二级菜单No.'+(i + 1) }}
                                                    </td>
                                                    {{#  for (var j = 0; j < 3; j++) { }}
                                                    <td>
                                                        <input type="hidden" class="layui-input" name="{{  i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.key" id="{{  i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_key" />
                                                        <input type="hidden" class="layui-input" name="{{  i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.type" id="{{  i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_type" value="click" />
                                                        <input type="hidden" class="layui-input" name="{{  i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.url" id="{{  i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_url" />
                                                        <input type="hidden" class="layui-input" name="{{  i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.appid" id="{{  i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_appid" />
                                                        <input type="hidden" class="layui-input" name="{{  i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.pagepath" id="{{  i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_pagepath" />
                                                        <input type="hidden" class="layui-input" name="{{  i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.media_id" id="{{  i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_mediaid" />
                                                        <input type="text" class="layui-input txtButton" name="{{  i == 5? 'menu.button['+j+']':'menu.button['+j+'].sub_button['+i+']' }}.name" id="{{  i == 5? 'menu_button'+j:'menu_button'+j+'_sub_button'+i }}_name" data-i="{{ i }}" data-j="{{ j }}" {{ i == 5? 'data-root='+j+'':'' }} />
                                                    </td>
                                                    {{#  } }}
                                                </tr>
                                                {{#  } }}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md5" id="buttonDetails">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div class="layui-card-header">按钮其他参数</div>
                                        <div class="mydiv">
                                            <div class="layui-form-item">
                                                <label for="Name" class="layui-form-label  layui-form-required">Name</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" id="buttonDetails_name" class="layui-input txtButton" disabled="disabled" />
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label for="Name" class="layui-form-label  layui-form-required">Type</label>
                                                <div class="layui-input-inline">
                                                    <select id="buttonDetails_type" class="dllButtonDetails layui-select">
                                                        <option value="click" selected="selected">点击事件（传回服务器）</option>
                                                        <option value="view">访问网页（直接跳转）</option>
                                                        <option value="miniprogram">小程序（直接跳转）</option>
                                                        <option value="location_select">弹出地理位置选择器</option>
                                                        <option value="pic_photo_or_album">弹出拍照或者相册发图</option>
                                                        <option value="pic_sysphoto">弹出系统拍照发图</option>
                                                        <option value="pic_weixin">弹出微信相册发图器</option>
                                                        <option value="scancode_push">扫码推事件</option>
                                                        <option value="scancode_waitmsg">扫码推事件且弹出“消息接收中”提示框</option>
                                                        <option value="media_id">下发消息（除文本消息）</option>
                                                        <option value="view_limited">跳转图文消息URL</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-form-item" id="buttonDetails_key_area">
                                                <label for="Name" class="layui-form-label  layui-form-required">Key</label>
                                                <div class="layui-input-block">
                                                    <input id="buttonDetails_key" class="layui-input txtButtonDetails" type="text" />
                                                </div>
                                            </div>
                                            <div class="layui-form-item" id="buttonDetails_url_area">
                                                <label for="Name" class="layui-form-label  layui-form-required">Url</label>
                                                <div class="layui-input-block">
                                                    <input id="buttonDetails_url" class="layui-input txtButtonDetails" type="text" />
                                                </div>
                                            </div>
                                            <div class="layui-form-item" id="buttonDetails_miniprogram_appid_area">
                                                <label for="Name" class="layui-form-label  layui-form-required">小程序AppId</label>
                                                <div class="layui-input-block">
                                                    <input id="buttonDetails_miniprogram_appid" class="layui-input txtButtonDetails" type="text" />
                                                </div>
                                            </div>
                                            <div class="layui-form-item" id="buttonDetails_miniprogram_pagepath_area">
                                                <label for="Name" class="layui-form-label  layui-form-required">小程序PagePath</label>
                                                <div class="layui-input-block">
                                                    <input id="buttonDetails_miniprogram_pagepath" class="layui-input txtButtonDetails" type="text" />
                                                </div>
                                            </div>
                                            <div class="layui-form-item" id="buttonDetails_mediaId_area">
                                                <label for="Name" class="layui-form-label  layui-form-required">MediaId</label>
                                                <div class="layui-input-block">
                                                    <input id="buttonDetails_mediaId" class="layui-input txtButtonDetails" type="text" />
                                                </div>
                                            </div>
                                            <div class="layui-form-item" id="rootButtonNotice">
                                                <label for="Name" class="layui-form-label  layui-form-required">说明：</label>
                                                <div class="layui-form-mid layui-word-aux"> 如果还有下级菜单请忽略上述Type和Key、Url等参数。</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</script>
<script src="/lib/jquery/jquery-2.1.4.js"></script>
<script src="/lib/wechatmenu/jquery.form.js"></script>

<script>
    var debug = layui.setter.debug;
    layui.data.done = function (d) {
        //开启调试情况下获取接口赋值数据
        if (debug) { console.log(d.data); }
        layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'cropperImg'],
            function () {
                var $ = layui.$
                    , form = layui.form
                    , admin = layui.admin
                    , laydate = layui.laydate
                    , upload = layui.upload
                    , cropperImg = layui.cropperImg
                    , coreHelper = layui.coreHelper;

                var csWeChat = {};
                var maxSubMenuCount = 5;
                var menuState;

                csWeChat.menu = {
                    token: '',
                    init: function () {
                        menuState = $('#menuState');
                        $('#buttonDetails').hide();
                        //$('#menuEditor').hide();
                        $("#buttonDetails_type").change(csWeChat.menu.typeChanged);
                        $(':input[id^=menu_button]').click(function () {
                            $('#buttonDetails').show();
                            var idPrefix = $(this).attr('data-root')
                                ? ('menu_button' + $(this).attr('data-root'))
                                : ('menu_button' + $(this).attr('data-j') + '_sub_button' + $(this).attr('data-i'));
                            var keyId = idPrefix + "_key";
                            console.log(idPrefix);
                            var nameId = idPrefix + "_name";
                            var typeId = idPrefix + "_type";
                            var urlId = idPrefix + "_url";
                            var mediaIdId = idPrefix + "_mediaid";
                            var appidId = idPrefix + "_appid";
                            var pagepathId = idPrefix + "_pagepath";

                            var txtDetailsKey = $('#buttonDetails_key');
                            var txtDetailsName = $('#buttonDetails_name');
                            var ddlDetailsType = $('#buttonDetails_type');
                            var txtDetailsUrl = $('#buttonDetails_url');
                            var txtMediaId = $('#buttonDetails_mediaId');
                            var txtDetailsAppid = $('#buttonDetails_miniprogram_appid');
                            var txtDetailsPagepath = $('#buttonDetails_miniprogram_pagepath');

                            var hiddenButtonKey = $('#' + keyId);
                            var hiddenButtonType = $('#' + typeId);
                            var hiddenButtonUrl = $('#' + urlId);
                            var hiddenButtonMediaId = $('#' + mediaIdId);
                            var hiddenButtonAppid = $('#' + appidId);
                            var hiddenButtonPagepath = $('#' + pagepathId);

                            txtDetailsKey.val(hiddenButtonKey.val());
                            txtDetailsName.val($('#' + nameId).val());
                            ddlDetailsType.val(hiddenButtonType.val());
                            txtDetailsUrl.val(hiddenButtonUrl.val());
                            txtMediaId.val(hiddenButtonMediaId.val());
                            txtDetailsAppid.val(hiddenButtonAppid.val());
                            txtDetailsPagepath.val(hiddenButtonPagepath.val());

                            csWeChat.menu.typeChanged();

                            txtDetailsKey.unbind('blur').blur(function () {
                                hiddenButtonKey.val($(this).val());
                            });
                            ddlDetailsType.unbind('blur').blur(function () {
                                hiddenButtonType.val($(this).val());
                            });
                            txtDetailsUrl.unbind('blur').blur(function () {
                                hiddenButtonUrl.val($(this).val());
                            });
                            txtMediaId.unbind('blur').blur(function () {
                                hiddenButtonMediaId.val($(this).val());
                            });
                            txtDetailsAppid.unbind('blur').blur(function () {
                                hiddenButtonAppid.val($(this).val());
                            });
                            txtDetailsPagepath.unbind('blur').blur(function () {
                                hiddenButtonPagepath.val($(this).val());
                            });

                            //修改当前行列样式
                            var row = parseInt($(this).attr('data-i'));
                            var column = parseInt($(this).attr('data-j'));
                            $('#menuTable input').removeClass('currentMenuInput');
                            $('#menuTable thead th').removeClass('currentMenuItem');
                            $('#menuTable tbody td').removeClass('currentMenuItem');
                            $(this).addClass('currentMenuInput');
                            $('#menuTable thead th').eq(column + 1).addClass('currentMenuItem');
                            $('#menuTable tbody tr').eq(row).find('td').eq(0).addClass('currentMenuItem');

                            //一级菜单提示
                            if (row === 5) {
                                $('#rootButtonNotice').show();
                            } else {
                                $('#rootButtonNotice').hide();
                            }
                        });

                        //获取菜单中
                        $('#btnGetMenu').click(function () {
                            menuState.html('获取菜单中...');
                            coreHelper.Post("Api/WeChatMenu/GetMenu", null, function (e) {
                                console.log(e);
                                if (e.code === 0 && e.data.errcode == 0) {
                                    $(':input[id^=menu_button]:not([id$=_type])').val('');
                                    $('#buttonDetails:input').val('');

                                    var buttons = e.data.menu.button;
                                    //此处i与j和页面中反转
                                    for (var i = 0; i < buttons.length; i++) {
                                        var button = buttons[i];
                                        $('#menu_button' + i + '_name').val(button.name);
                                        $('#menu_button' + i + '_key').val(button.key);
                                        $('#menu_button' + i + '_type').val(button.type || 'click');
                                        $('#menu_button' + i + '_url').val(button.url);
                                        $('#menu_button' + i + '_appid').val(button.appid);
                                        $('#menu_button' + i + '_pagepath').val(button.pagepath);
                                        $('#menu_button' + i + '_mediaid').val(button.media_id);

                                        if (button.sub_button && button.sub_button.length > 0) {
                                            //二级菜单
                                            for (var j = 0; j < button.sub_button.length; j++) {
                                                var subButton = button.sub_button[j];
                                                var idPrefix = '#menu_button' + i + '_sub_button' + j;
                                                $(idPrefix + "_name").val(subButton.name);
                                                $(idPrefix + "_type").val(subButton.type || 'click');
                                                $(idPrefix + "_key").val(subButton.key);
                                                $(idPrefix + "_url").val(subButton.url);
                                                $(idPrefix + "_appid").val(subButton.appid);
                                                $(idPrefix + "_pagepath").val(subButton.pagepath);
                                                $(idPrefix + "_mediaid").val(subButton.media_id);
                                            }
                                        } else {
                                            //底部菜单
                                            //...
                                        }
                                    }
                                    //显示JSON
                                    //$('#txtReveiceJSON').text(JSON.stringify(json));
                                    menuState.html('菜单获取已完成');
                                } else {
                                    menuState.html(e.msg || '执行过程有错误，请检查！');
                                }
                            });
                        });
                        //删除菜单
                        $('#btnDeleteMenu').click(function () {
                            if (!confirm('确定要删除菜单吗？此操作无法撤销！')) {
                                return;
                            }
                            menuState.html('删除菜单中...');
                            coreHelper.Post("Api/WeChatMenu/DeleteMenu", null, function (e) {
                                console.log(e);
                                if (e.code === 0) {
                                    menuState.html('删除成功，如果是误删，并且界面上有最新的菜单状态，可以立即点击【更新到服务器】按钮。');
                                } else {
                                    menuState.html(e.msg + e.otherData);
                                }
                            });
                        });

                        //更新到服务器
                        $('#submitMenu').click(function () {
                            if (!confirm('确定要提交吗？此操作无法撤销的哦！')) {
                                return;
                            }

                            var headers = {};
                            headers[layui.setter.request.tokenName] = layui.data(layui.setter.tableName)[layui.setter.request.tokenName];

                            menuState.html('上传中...');
                            $('#form_Menu').ajaxSubmit({
                                dataType: 'json',
                                headers: headers, //添加请求头部
                                success: function (json) {
                                    if (json.Success) {
                                        menuState.html('上传成功。' + json.msg);
                                    } else {
                                        menuState.html(json.msg);
                                    }
                                }
                            });

                        });

                        $('#menuTable .control-input').hover(function () {
                            var row = parseInt($(this).attr('data-i'));
                            var column = parseInt($(this).attr('data-j'));

                            $('#menuTable thead th').removeClass('hoverMenuItem');
                            $('#menuTable tbody td').removeClass('hoverMenuItem');

                            $('#menuTable thead th').eq(column + 1).addClass('hoverMenuItem');
                            $('#menuTable tbody tr').eq(row).find('td').eq(0).addClass('hoverMenuItem');
                        }, function () {
                            $('#menuTable thead th').removeClass('hoverMenuItem');
                            $('#menuTable tbody td').removeClass('hoverMenuItem');
                        });
                    },
                    typeChanged: function () {
                        var val = $('#buttonDetails_type').val().toUpperCase();
                        switch (val) {
                            case 'CLICK':
                                $('#buttonDetails_key_area').slideDown(100);
                                $('#buttonDetails_url_area').slideUp(100);
                                $('#buttonDetails_miniprogram_appid_area').slideUp(100);
                                $('#buttonDetails_miniprogram_pagepath_area').slideUp(100);
                                $('#buttonDetails_mediaId_area').slideUp(100);
                                break;
                            case 'VIEW':
                                $('#buttonDetails_key_area').slideUp(100);
                                $('#buttonDetails_url_area').slideDown(100);
                                $('#buttonDetails_miniprogram_appid_area').slideUp(100);
                                $('#buttonDetails_miniprogram_pagepath_area').slideUp(100);
                                $('#buttonDetails_mediaId_area').slideUp(100);
                                break;
                            case 'MINIPROGRAM':
                                $('#buttonDetails_key_area').slideUp(100);
                                $('#buttonDetails_url_area').slideDown(100);
                                $('#buttonDetails_miniprogram_appid_area').slideDown(100);
                                $('#buttonDetails_miniprogram_pagepath_area').slideDown(100);
                                $('#buttonDetails_mediaId_area').slideUp(100);
                                break;
                            case 'MEDIA_ID':
                            case 'VIEW_LIMITED':
                                $('#buttonDetails_key_area').slideUp(100);
                                $('#buttonDetails_url_area').slideUp(100);
                                $('#buttonDetails_miniprogram_appid_area').slideUp(100);
                                $('#buttonDetails_miniprogram_pagepath_area').slideUp(100);
                                $('#buttonDetails_mediaId_area').slideDown(100);
                                break;
                            default:
                                $('#buttonDetails_key_area').slideDown(100);
                                $('#buttonDetails_url_area').slideUp(100);
                                $('#buttonDetails_miniprogram_appid_area').slideUp(100);
                                $('#buttonDetails_miniprogram_pagepath_area').slideUp(100);
                                $('#buttonDetails_mediaId_area').slideUp(100);
                                break;
                        }
                    },
                    setToken: function (token) {
                        csWeChat.menu.token = token;
                        $('#menuEditor').show();
                        $('#menuLogin').hide();
                    }
                };

                //初始化操作
                csWeChat.menu.init();

                //重载form
                form.render();
            })
    };
</script>